body {font:13px Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; color:#333; margin: 0; }


#container {
    width: 280px;
    overflow: hidden;
    position: relative;
    display: none;
    padding: 10px;
    border-radius: 3px;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#93b4dd),to(#5c83b6));
}

#screen {
    width: 210px;
    height: 49px;
    background: #eaeedc;
    border-radius: 4px;
    margin: 0 0 auto 0;
    position: relative;
    float: right;
    z-index: 10;
    overflow: hidden;
}

#screen-ass {
    position: absolute;
    width: 100%;
    height: 24px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    left: 0;
    bottom: 0;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#dfe4c8),to(#f3f5e1));
}

#msg, #msg2 {
    color: #3d3f35;
    text-align: center;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'microsoft yahei';
}

#msg2 {
    font-weight: normal;
    font-size: 11px;
    line-height: 11px;
    z-index: 10;
    position: relative;
    white-space: nowrap;
}

#progress {
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: 6px;
    z-index: 2;
}

#progressbar {
    height: 5px;
    width: 100px;
    margin: 4px auto;
    border: #a9ad97 1px solid;
    border-radius: 3px;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#b4b8a5),to(#c2c6b2));
}

#progressinner {
    height: 100%;
    width: 0;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#6d6f63),to(#5a5d50));
    border-radius: 2px;
}

#current-time, #total-time {
    width: 30px;
    height: 10px;
    color: #3d3f35;
    position: absolute;
    bottom: 0;
    font-size: 11px;
    text-align: center;
}

#current-time {
    left: 20px;
}

#total-time {
    right: 20px;
}

#play,
#pause,
#next {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    background: url(../img/controller.png) 0 0 no-repeat;
    overflow: hidden;
    cursor: pointer; 
}

#play {
    background-position: 0 0;
    left: 17px;
    top: 10px;
}

#play:hover {
    background-position: 0 -16px;
}

#pause {
    background-position: 0 -32px;
    left: 17px;
    top: 10px;
    display: none;
}

#pause:hover {
    background-position: 0 -48px;
}

#next {
    background-position: 0 -64px;
    top: 10px;
    left: 46px;
}

#next:hover {
    background-position: 0 -80px;
}

#volume-max,
#volume-min {
    width: 9px;
    height: 8px;
    position: absolute;
    z-index: 10;
    top: 38px;
    cursor: pointer;
}

#volume-max {
    left: 63px;
    background: url(../img/volumemax.png);
}

#volume-min {
    left: 8px;
    background: url(../img/volumemin.png);
}

#volume-bar {
    width: 40px;
    height: 4px;
    background: #273746;
    position: absolute;
    top: 40px;
    left: 19px;
    border-radius: 2px;
    z-index: 10;
}

#volume-thumb {
    width: 7px;
    height: 7px;
    background: #cad6e3;
    border: #2f4255 1px solid;
    border-radius: 2px;
    position: absolute;
    top: 38px;
    left: 19px;
    z-index: 100;
    cursor: pointer;
}

#fixedpane {
    width: 8px;
    height: 4px;
    background: url(../img/arrow.png);
    position: absolute;
    bottom: 3px;
    right: 10px;
    cursor: pointer;
    display: none;
}

